$(function () {
    $('tbody').on('click', '.btnUpdate', function () {
        const seaID = $(this).attr('data-seaID')
        const name = $(this).parents('tr').children().eq(1).html()
        const username = $(this).parents('tr').children().eq(0).html()
        const phone = $(this).parents('tr').children().eq(2).html()
        const seaIDNumber = $(this).parents('tr').children().eq(3).html()
        // console.log(name);
        indexxiugai = layui.layer.open({
            type: 1,
            title: '修改员工',
            area: ['1180px', '500px'],
            content: `
            <form class="layui-form" seaID="form-edit">
        <div class="layui-form-item">
        <input type="hseaIDden" name="xiugai" value="${seaID}">
            <label class="layui-form-label">账号：</label>
            <div class="layui-input-block">
                <input type="text" name="name" required lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input" value="${name}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">员工姓名：</label>
            <div class="layui-input-block">
                <input type="text" name="username" required lay-verify="required" placeholder="员工姓名" autocomplete="off" class="layui-input" value="${username}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">手机号：</label>
            <div class="layui-input-block">
                <input type="text" name="phone" required lay-verify="required" placeholder="请输入手机号" autocomplete="off" class="layui-input" value="${phone}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">身份证号：</label>
            <div class="layui-input-block">
                <input type="text" name="seaIDNumber" required lay-verify="required" placeholder="请输入身份证号" autocomplete="off" class="layui-input" value="${seaIDNumber}">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn quxiao" lay-filter="formDemo" type="reset">取消</button>
                <button type="submit" lay-submit class="layui-btn layui-btn-primary">确定</button>
            </div>
        </div>
    </form>
    `
        })
    })



    //分页器
    const data = {
        page: 1,
        pageSize: 2,
    }
    renderPage()
    function renderPage(total) {
        layui.laypage.render({
            // 存放分页按钮的盒子的seaID，没有#
            elem: 'pageBox',
            // 页码的总数
            count: total,
            // 每页显示的条数，默认是10
            // limit: 5,
            limit: data.pageSize,
            // 当前的页码
            curr: data.page,
            layout: ['count', 'limit', 'prev', 'page', 'next', 'skip',],
            limits: [2, 4, 6, 8],
            jump: function (obj, first) {
                // obj当前的最新分页配置选项
                // first，渲染分页按钮调用的jump值则为true，如果单击按钮调用的jump值则为undefined
                // 只有切换按钮时，才让指向下面的代码，渲染按钮时，不执行下面的代码
                if (!first) {
                    // 切换文章数据
                    // 获取当前最新的页码 obj.curr
                    // 修改查询参数data
                    data.page = obj.curr
                    // 获取当前每页显示的条数，修改查询参数data
                    data.pageSize = obj.limit
                    // 重新获取并渲染文章数据
                    renderList()
                }
            }
        })
    }

    //渲染列表
    renderList()
    function renderList() {
        $.ajax({
            url: 'http://121.4.102.44:8083/employee/page?page=1&pageSize=2',
            success(res) {
                // console.log(res);
                if (res.code !== 1) {
                    return console.log('获取失败');
                }
                let ben = JSON.parse(localStorage.getItem('staff'))
                console.log(ben);
                console.log('获取成功');
                const htmlStr = template('tpl-employyee', res.data)
                $('tbody').html(htmlStr)
                // layui.form.render()
                renderPage(res.data.total)
            }
        })
    }

    //搜索员工
    $('#searchE').on('click', function (e) {
        e.preventDefault()
        //渲染接口数据到页面
        // const seaID = $('[name=searching]').val().trim()
        // console.log(seaID);
        // if (seaID !== '') {
        //     $.ajax({
        //         method: 'get',
        //         url: 'http://121.4.102.44:8083/employee/page?page=1&pageSize=2&name=' + seaID,
        //         success(res) {
        //             console.log(res);
        //             const htmlStr = template('tpl-employyee', res.data)
        //             $('tbody').html(htmlStr)
        //             renderPage(res.data.total)
        //             $('#searchE').siblings('#ipt').val('')
        //         }
        //     })
        // }


        //渲染本地存储数据到页面
        //获取输入框内容
        let name = $('#ipt').val().trim()
        // 获取本地存储数据
        const data = JSON.parse(localStorage.getItem('staff'))
        // console.log(data);
        let fitdata = []
        for (let i = 0; i < data.length; i++) {
            if (data[i].name.indexOf(name) !== -1) {
                fitdata.push(data[i])
            }
        }
        //输入框符合本地存储的数据
        // console.log(fitdata);
        const htmlstr = template('lpt', fitdata)
        // console.log(htmlstr);
        $('tbody').html(htmlstr)
        renderPage()

    })

    //添加员工
    // $('#form-add').on('submit', function (e) {
    //     e.preventDefault()
    //     let arr = []
    //     if (localStorage.getItem('staff')) {
    //         arr = JSON.parse(localStorage.getItem('staff'))
    //     }
    //     const data = {
    //         name: $('[name=name]').val().trim(),
    //         username: $('[name=username]').val().trim(),
    //         phone: $('[name=phone]').val().trim(),
    //         idNumber: $('[name=idNumber]').val().trim(),
    //         status: 0
    //     }
    //     arr.push(data)
    //     $.ajax({
    //         method: 'post',
    //         url: 'http://121.4.102.44:8083/employee',
    //         contentType: 'application/json;charset=utf-8',
    //         data: JSON.stringify(data),
    //         success(res) {
    //             console.log(res);
    //             if (res.status !== 200) {
    //                 return localStorage.setItem('staff', JSON.stringify(arr))
    //             }
    //             // $('.cancle').onclick

    //         }
    //     })
    // })

    let add
    $('.addEmployee').on('click', function (e) {
        e.preventDefault()
        add = layui.layer.open({
            title: '添加员工',
            type: 1,
            area: ['700px', '560px'],
            content: $('#demo').html()
        });
        layui.use('form', function () {
            var form = layui.form;
            form.render();
        });

    });
    // 新增员工
    $('body').on('submit', '#form-add', function (e) {
        e.preventDefault()
        let arr = []
        if (localStorage.getItem('staff')) {
            arr = JSON.parse(localStorage.getItem('staff'))
        }
        var phone = /^[0-9]{3}$/
        if (!phone.test($('[name=phone]').val().trim())) {
            return layui.layer.msg('请输入正确的手机号码', {
                icon: 5
            })
        }
        var user = /^[0-9]{3}/;
        if (!user.test($('[name=idNumber]').val().trim())) {
            return layui.layer.msg('请输入正确的身份证号', {
                icon: 5
            })
        }
        const data = {
            name: $('[name=name]').val().trim(),
            username: $('[name=username]').val().trim(),
            phone: $('[name=phone]').val().trim(),
            idNumber: $('[name=idNumber]').val().trim(),
            status: 0
        }
        arr.push(data)
        $.ajax({
            method: 'post',
            url: 'http://121.4.102.44:8083/employee',
            contentType: 'application/json;charset=utf-8',
            data: JSON.stringify(data),
            success(res) {
                console.log(res);
                if (res.status !== 200) {
                    localStorage.setItem('staff', JSON.stringify(arr))
                }
                renderPage(res.data.total)

            }
        })
        $('[name=name]').val('')
        $('[name=username]').val('')
        $('[name=phone]').val('')
        $('[name=idNumber]').val('')
    })

    // 点击取消按钮 关闭模态框
    $('body').on('click', '.cancle', function () {
        layui.layer.close(add)
    })

    //编辑员工
    $('body').on('submit', '#form-edit', function (e) {
        e.preventDefault()
        const id = 1
        const username = $('[name=username]').val().trim()
        const name = $('[name=name]').val().trim()
        const phone = $('[name=phone]').val().trim()
        // const sex = $('[name=sex]').val().trim()
        const idNumber = $('[name=idNumber]').val().trim()
        $.ajax({
            method: 'put',
            url: 'http://121.4.102.44:8083/employee',
            contentType: "application/json",
            data: JSON.stringify({
                username,
                name,
                phone,
                // sex,
                idNumber,
                id
            }),
            success: function (res) {
                console.log(res);
                // if (res.status !== 200) {
                //     return console.log('请求失败');
                // }
                // console.log('请求成功');
                // // 重新渲染
                // console.log(res);
                // renderList()
                if (res.code !== 1) {
                    // if (res.status !== 200) {
                    return console.log('请求失败');
                }
                console.log('请求成功');
                renderPage(res.data.total)
                layui.layer.close(indexxiugai)
            }
        })
    })

    //更改禁用状态
    $('tbody').on('click', '.btnDisable', function () {
        layui.layer.confirm('您确定要调整该账号状态？', {
            title: '提示',
            area: ['600px', '250px'],
        })
        $(this).parents('tr').children().eq(4).removeClass('normal')
        $(this).parents('tr').children().eq(3).addClass('normal')
    })




})